<script setup>
import { onMounted, inject, reactive } from 'vue'

const $http = inject('$http')

const dataObj = reactive({
  list: [],
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http.get('/screen/page/hs').then(res => {
    const { data = [] } = res || {}
    const { baseInfo = [] } = data || []

    dataObj.list = {
      zs: baseInfo[0]?.value || 0,
      yj: baseInfo[1]?.value || 0,
      wj: baseInfo[2]?.value || 0,
      jcl: baseInfo[3]?.value || 0,
    }
  })
}
</script>

<template>
  <div class="townshipCollectionBox">
    <div class="numBox">
      <img class="icon" src="@/assets/naTest/icon1.png" />

      <div class="numData">
        <div class="name">今日应检</div>

        <div class="num">{{ dataObj.list.zs }}<span class="unit">人</span></div>
      </div>
    </div>

    <div class="numBox">
      <img class="icon" src="@/assets/naTest/icon2.png" />

      <div class="numData">
        <div class="name">今日已检</div>

        <div class="num">{{ dataObj.list.yj }}<span class="unit">人</span></div>
      </div>
    </div>

    <div class="numBox">
      <img class="icon" src="@/assets/naTest/icon3.png" />

      <div class="numData">
        <div class="name">今日未检</div>

        <div class="num wjNum">{{ dataObj.list.wj }}<span class="unit">人</span></div>
      </div>
    </div>

    <div class="numBox">
      <img class="icon" src="@/assets/naTest/icon4.png" />

      <div class="numData">
        <div class="name">检测率</div>

        <div class="num jclNum">{{ dataObj.list.jcl }}<span class="unit">%</span></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.townshipCollectionBox {
  padding: 0 15px;
  height: 113px;
  background: rgba(19, 181, 177, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;

  .numBox {
    flex: 1;
    display: flex;
    align-items: center;

    .icon {
      width: 50px;
      height: 50px;
    }

    .numData {
      flex: 1;
      align-items: center;
      margin-left: 7px;

      .name {
        height: 20px;
        font-size: 14px;
        color: #ffffff;
        display: flex;
        align-items: center;
      }

      .num {
        margin-top: 7px;
        height: 29px;
        font-size: 24px;
        font-weight: bold;
        font-family: Tahoma-Bold, Tahoma;
        color: #ffffff;
        line-height: 1;
        background: linear-gradient(180deg, #64cdab 0%, #49d0ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .unit {
          margin-left: 4px;
          font-size: 14px;
          color: #ffffff;
          background: #ffffff;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .wjNum {
        background: linear-gradient(180deg, #f9784f 0%, #fba365 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .jclNum,
      .jclNum .unit {
        background: linear-gradient(180deg, #44c5f5 0%, #6e7be8 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
